<template>
    <div id="set">
      <div class="header">
        <mt-header fiexd :title="uname?uname + '个人中心' : uname"></mt-header>
      </div>
     <div class="content">
       
        <div class="userImg">
          <img :src="hImg">
        </div>
       
        <div class="set-info">
          <mt-cell title="用户名" :value="uname"></mt-cell>
          <mt-cell title="邮箱" :value="em"></mt-cell>
          <mt-cell title="信息修改" is-link></mt-cell>
          <div class="set-logout">
            <mt-button type="danger" size="large" @click="logouthandle">退出登陆</mt-button>
        </div>
      </div>
     </div>
    </div>
</template>
<script>

import axios from 'axios'
import { Toast} from 'mint-ui'

import {mapState, mapMutations} from 'vuex'

export default {
  computed:{
    ...mapState({
        uname: state => state.username,
        em: 'email',
        hImg: 'headerImg'
    })
  },
  methods:{
    ...mapMutations([
      'setState'
    ]),
    //退出登录
    logouthandle(){
      const storeObj = {
        username: '',
        email: '',
        headerImg: ''
      }
      this.setState(storeObj)

      sessionStorage.removeItem('state')
    }
  }
}
</script>
<style lang="less" scoped>
  #set{
    .set-header{
      font-size: 0;
    }
    .mint-cell-wrapper{
      padding-right: 50px;
    }
    .set-logout{
      margin-top:10px; 
    }
  }

</style>

